<template>
	<el-form :model="userForm" label-width="100px" ref="formRef" :rules="formRules" hide-required-asterisk>
		<el-form-item label="头像">
			<avatar-uploader :emit-func="emitFunc" />
		</el-form-item>
		<el-form-item label="用户名" prop="username">
			<el-input v-model="userForm.username" placeholder="请输入用户名" />
		</el-form-item>
		<el-form-item label="密码" prop="password">
			<el-input type="password" v-model="userForm.password" placeholder="请输入密码" />
		</el-form-item>
		<el-form-item label="重复密码" prop="repeat">
			<el-input type="password" v-model="repeatPassword" placeholder="请再次输入密码" />
		</el-form-item>
		<el-form-item label="年龄" prop="age">
			<el-input v-model="userForm.age" placeholder="请输入年龄" />
		</el-form-item>
		<el-form-item label="性别">
			<el-radio-group v-model="userForm.gender">
				<el-radio label="男" />
				<el-radio label="女" />
				<el-radio label="保密" />
			</el-radio-group>
		</el-form-item>
		<el-form-item label="职业" prop="job">
			<el-input v-model="userForm.job" placeholder="请输入职业" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="handleSubmit(formRef)" :icon="Check" :loading="loading">
				注册
			</el-button>
			<el-button @click="callback" :icon="Close">取消</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import { register } from '@/api';
import type { UserType } from '@/types';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import AvatarUploader from '@/components/upload/index.vue'

const props = defineProps({
	callback: Function
})
const loading = ref(false)
const formRef = ref<FormInstance>()
const repeatPassword = ref('')
const userForm = reactive<UserType>({
	username: '',
	password: '',
})
const checkPassword = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('密码不可为空'))
	} else {
		if (repeatPassword.value !== '') {
			if (!formRef.value) return
			formRef.value.validateField('repeat', () => null)
		}
		callback()
	}
}
const checkRepeatPassword = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请再输入一次密码'))
	} else if (repeatPassword.value !== userForm.password) {
		callback(new Error("两次输入的密码不一致"))
	} else {
		callback()
	}
}
const formRules: FormRules = {
	userName: [
		{ required: true, message: '用户名不可为空', trigger: 'blur' }
	],
	userPassword: [
		{ validator: checkPassword, trigger: 'blur' }
	],
	repeat: [
		{ validator: checkRepeatPassword, trigger: 'blur' }
	]
}
const emitFunc = (imgPath: string) => {
	userForm.avatar = imgPath
	console.log(userForm);

}
const handleSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true
			register(userForm).then((res: any) => {
				if (res.code === 200) {
					ElMessage.success('注册成功！')
					if (props.callback) {
						props.callback('register', true)
					}
				}
				loading.value = false
			})
		}
	})
}
</script>

<style lang="less" scoped>

</style>